<template>
  <HeaderPart>
    地址管理
  </HeaderPart>
  <div class="wrapper">
    <ul>
      <li v-for="item in addressList"
      :key="item.id">
        <p>名称: {{ item.contactName }}</p>
        <div class="buttons">
          <div>地址: {{ item.address }}</div>
          <div>  <el-icon @click="toUpdate(item.id)"><Edit/></el-icon> <el-icon @click="deleteDress(item.id)"><CloseBold/></el-icon>
          </div>
        </div>
        <p>电话: {{ item.contactTel }}</p>
      </li>
    </ul>
    <div class="addButton">
      <el-button type="success" @click="addAddress">新增收货地址</el-button>
    </div>
  </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {onBeforeMount, ref} from "vue";
import {Edit,CloseBold} from '@element-plus/icons-vue'
import router from "@/router";
import {deleteAddress, getAddress} from "@/utils/api/addressManager";

// 获取用户信息
const userId = (JSON.parse(localStorage.getItem("userLoginAll"))).id
// 获取地址信息
const addressList = ref([])
onBeforeMount(async ()=>{
  const res = await getAddress({userId})
  addressList.value = res.data
})
// 删除地址
const deleteDress =async (addressId)=>{
  await deleteAddress({addressId})
  // 重新获取地址信息
  const res = await getAddress({userId})
  addressList.value = res.data
}
// 进入更新页面
const toUpdate=(addressId)=>{
  router.push('/update-address/' + addressId)
}
// 进入添加页面
function addAddress(){
  router.push('/add-address/' + userId)
}
</script>

<style scoped>
.wrapper {
  height: 90vh;
  margin: 4rem 1rem;
  /*background-color: #70BC46;*/
  display: flex;
  flex-direction: column;
}
.wrapper ul {
  list-style: none;
  display: flex;
  padding-inline-start: 0;
  flex-direction: column;
}
.wrapper ul li {
  padding: 2rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
}
.buttons {
  display: flex;
  justify-content: space-between;
}
.addButton {
  margin:0 auto;
}
</style>